import textColorClass from "@/assets/ts/text_color_class"
import ItemMoudle from "@/components/common/ItemModule"
import TitleMain from "@/components/common/TitleMain"

type ItemNodeProps = {
  name: string
  num: number | string
  tip?: string
}

const ItemNode = ({ name, num, tip = '' }: ItemNodeProps) => {
  return <div className="flex flex-col gap-[10px]">
    <div className="bg-[url(@/assets/svg/EventStat-ItemNode-bg.svg)] w-[80px] h-[80px] flex items-center justify-center">
      <span className={`${textColorClass.text_default} text-[14px]`}>{num}{tip}</span>
    </div>
    <div className="text-center">
      <span className={`${textColorClass.text_default} text-[14px]`}>{name}</span>
    </div>
  </div>
}

const dataSource: ItemNodeProps[] = [
  {
    name: '事件处置',
    num: 1234,
    tip: '件'
  },
  {
    name: '事件处置率',
    num: 99,
    tip: '%'
  },
  {
    name: '每日报告',
    num: 1686,
    tip: '份'
  },
  {
    name: '总结报告',
    num: 686,
    tip: '份'
  }
]


const EventStat = () => {
  return <ItemMoudle
    className="w-[384px]"
    childClassName="h-[148px] flex items-center justify-between"
    header={
      <TitleMain title="事件统计" />
    }
  >
    {
      dataSource.map((item,index)=>{
        return <ItemNode {...item} key={index}/>
      })
    }

    
   
  </ItemMoudle>
}

export default EventStat